<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Title</title>
    <style type="text/css">
        .div {background-color: antiquewhite;  }
        h1 {text-align:center;}
        h4.date {text-align:right; color: red;}
        p.main {text-align:justify; color: aquamarine; font-family:Arial,Helvetica,sans-serif;}

    </style>
    <style>
        .customers
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:100%;
            border-collapse:collapse;
        }
        .customers td, .customers th
        {
            font-size:1em;
            border:1px solid #98bf21;
            padding:3px 7px 2px 7px;
        }
        .customers th
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:#A7C942;
            color:#ffffff;
        }
        .customers tr.alt
        {
            color:#000000;
            background-color:#EAF2D3;
        }

        .customers tr.altddddddd
        {
            color:red;
            background-color:#EAF2D3;
        }
    </style>
</head>
<body style="text-align: center">


<div class="div"><h1><a href="练习4.html">百度一下你就知道</a></h1></div>
<div class="div"><h1><a href="../11.6/test1.html">百度一下你就知道</a></h1></div>
<div class="div">
    <p>
<h4 class="color" class="date">沁园春雪</h4>
<p class="main" style="align-content: center; text-decoration:underline"><b style="color: #8b587f">北国风光，千里冰封，万里雪飘。</b>
    望长城内外，惟余莽莽；大河上下，顿失滔滔。
    山舞银蛇，原驰蜡象，欲与天公试比高。
    须晴日，看红装素裹，分外妖娆。
    江山如此多娇，引无数英雄竞折腰。
    惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
    一代天骄，成吉思汗，只识弯弓射大雕。
    <em style="color: #2ac4f8">俱往矣，数风流人物，还看今朝。</em>
    </p>
    </div>
<div>
    <p>
        配图:
        <img src="banner2.jpg" alt="Smiley face" style="width: 1000px; height: 500px;"></p>
</div>
<div ><table border="2" style="margin-left: auto; margin-right: auto; color: #2ac4f8; background-color: #8b587f;">
    <tr>
        <td>一二三, 四五六</td>
        <td>七八九, 十十一</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
    </table></div>
<div style="background-color: #fa99fd"><ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>
    <form>
        <table style="margin-left: auto; margin-right: auto;">
        <tr>
        <td>输入:</td>
            <td> <input type="text" name="firstname"><br></td>
            <td>&nbsp;</td>
            </tr>
        <tr>
        <td>输入:</td>
            <td> <input type="password" name="lastname"></td>
            <td> <input type="submit" name=""></td>
        </tr>
            </table>
    </form> </div>
<table style="margin-right: auto; margin-left: auto;">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>

<table class="customers" border="1">
    <caption>马浩男</caption>

    <tr>
        <th><h1>一</h1></th>
        <th><h1>二</h1></th>
        <th><h1>三</h1></th>
    </tr>
    <tr>
        <td>张三</td>
        <td>李四</td>
        <td>王五</td>
    </tr>
    <tr class="altddddddd">
        <td>Berglunds snabbköp</td>
        <td>Christina Berglund</td>
        <td>Sweden</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
    <tr class="alt">
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
    </tr>
    <tr class="alt">
        <td>Königlich Essen</td>
        <td>Philip Cramer</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
    </tr>
    <tr class="alt">
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
    </tr>
    <tr>
        <td>North/South</td>
        <td>Simon Crowther</td>
        <td>UK</td>
    </tr>
    <tr class="alt">
        <td>Paris spécialités</td>
        <td>Marie Bertrand</td>
        <td>France</td>
    </tr>
</table>
</body>
</html>